<template>
	<view>
		<view v-if=" active.active_id " class="container">
			<!-- 富文本组件 -->
			<!-- <import src="../../../wxParse/wxParse.wxml"></import> -->

			<!-- 滚动容器 -->
			<scroll-view class="scroll-container" @scroll="onScrollEvent" :scroll-top="scrollTop" scroll-y="true">

				<!-- 商品图片 -->
				<view class="goods-swiper">
					<swiper autoplay=" autoplay " @change="setCurrent" class="banner-box  swiper-box" :duration="duration"
					 :indicator-dots="indicatorDots" :interval="interval" circular="true">
						<swiper-item v-if="goods.image !== undefined && goods.image.length >0" v-for=" (item,index) in goods.image " :key="index" @tap="onPreviewImages" :data-index="index">
							<image class="slide-image" mode="aspectFill" :src=" item.file_path "></image>
						</swiper-item>
					</swiper>
					<view class="banner-num">
						<text>{{ currentIndex }}</text>
						<text>/</text>
						<text>{{ goods.image.length }}</text>
					</view>
				</view>
				<!-- 商品信息 -->
				<view class="goods-info m-top20">
					<!-- 价格、销量 -->
					<view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
						<view class="block-left dis-flex flex-y-end">
							<view class="active-tag">
								<text>限时砍价</text>
							</view>
							<!-- 底价 -->
							<text class="floor-price__samll">￥</text>
							<text class="floor-price">{{ active.floor_price }}</text>
							<!-- 原价 -->
							<text class="original-price">￥{{ goods.goods_sku.goods_price }}</text>
						</view>
						<view class="block-right dis-flex">
							<!-- 销量 -->
							<view class="goods-sales">
								<text>{{ active.active_sales }}人已砍成</text>
							</view>
						</view>
					</view>
					<!-- 标题、分享 -->
					<view class="info-item info-item__name dis-flex flex-y-center">
						<view class="goods-name flex-box">
							<text class="twolist-hidden">{{ goods.goods_name }}</text>
						</view>
						<view class="goods-share__line"></view>
						<view class="goods-share">
							<form @submit="onClickShare" report-submit="true">
								<button form-type="submit" class="share-btn dis-flex flex-dir-column">
									<text class="share__icon iconfont icon-fenxiang"></text>
									<text class="f-24">分享</text>
								</button>
							</form>
						</view>
					</view>
					<!-- 商品卖点 -->
					<view v-if=" goods.selling_point " class="info-item info-item_selling-point">
						<text>{{ goods.selling_point }}</text>
					</view>
					<!-- 活动倒计时 -->
					<view v-if=" !active.is_end " class="info-item info-item_status info-item_countdown">
						<text class="countdown-icon iconfont icon-naozhong"></text>
						<block  v-if="actEndTimeList !== undefined && actEndTimeList.length >0" v-for=" (item,indexss) in actEndTimeList " :key="indexss">
							<text>距离活动结束 还剩{{ item.dynamic.hou }}时{{ item.dynamic.min }}分{{ item.dynamic.sec }}秒</text>
						</block>
					</view>
					<!-- 活动已结束 -->
					<view v-if=" active.is_end " class="info-item info-item_status info-item_end">
						<text class="countdown-icon iconfont icon-naozhong"></text>
						<text>砍价活动已结束，下次记得早点来哦~</text>
					</view>
				</view>

				<!-- 选择商品规格 -->
				<!-- <view class="goods-choice m-top20 b-f">
      <form v-if=" goods.spec_type == 20 " submit="onToggleTrade" report-submit>
        <button class="btn-normal" form-type="submit">
          <view class="sku-selector dis-flex flex-y-center">
            <view class="flex-box f-28">
              <text class="col-8">选择：</text>
              <text v-for=" goodsMultiSpec.spec_attr " v-key="this">{{ item.group_name }} </text>
            </view>
            <view class="f-26 col-9 t-r">
              <text class="iconfont icon-xiangyoujiantou"></text>
            </view>
          </view>
        </button>
      </form>
    </view> -->

				<!-- 砍价玩法 -->
				<view class="bargain-rules top-nav-bar m-top20 b-f">
					<form @submit="onToggleRules" report-submit="true">
						<button form-type="submit" class="btn-normal">

							<view class="item-title dis-flex">
								<view class="block-left flex-box">
									<text>砍价玩法</text>
								</view>
								<view class="block-right">
									<text class="show-more col-9">查看规则</text>
								</view>
							</view>

							<!-- 砍价步骤 -->
							<view class="rule-simple dis-flex flex-x-around">
								<view class="simple-item dis-flex flex-dir-column flex-y-center">
									<view class="i-number dis-flex flex-x-center flex-y-center">
										<text class="f-30">1</text>
									</view>
									<view class="i-text f-28">点击砍价</view>
								</view>
								<view class="simple-item dis-flex flex-dir-column flex-y-center">
									<view class="i-number dis-flex flex-x-center flex-y-center">
										<text class="f-30">2</text>
									</view>
									<view class="i-text f-28">找人帮砍</view>
								</view>
								<view class="simple-item dis-flex flex-dir-column flex-y-center">
									<view class="i-number dis-flex flex-x-center flex-y-center">
										<text class="f-30">3</text>
									</view>
									<view class="i-text f-28">砍到最低</view>
								</view>
								<view class="simple-item dis-flex flex-dir-column flex-y-center">
									<view class="i-number dis-flex flex-x-center flex-y-center">
										<text class="f-30">4</text>
									</view>
									<view class="i-text f-28">优惠购买</view>
								</view>
							</view>
						</button>
					</form>
				</view>

 
				<!-- 商品描述 -->
				<view class="goods-content m-top20">
					<view class="item-title b-f">
						<text>商品描述</text>
					</view>
					<block v-if=" goods.content != '' ">
						<view class="goods-content__detail b-f">
							<!-- <template is="wxParse" data=" wxParseData:content.nodes "></template> -->
							<rich-text :nodes="article"></rich-text>
						</view>
					</block>
					<block v-else>
						<view class="yoshop-notcont">
							<text class="iconfont icon-wushuju"></text>
							<text class="cont">亲，暂无商品描述</text>
						</view>
					</block>
				</view>
			</scroll-view>

			<!-- 底部选项卡 -->
			<view class="footer-fixed">
				<view class="footer-container dis-flex">
					<!-- 导航图标 -->
					<view class="foo-item-fast dis-flex flex-x-center flex-y-center">
						<form @submit="onTargetHome" report-submit>
							<button class="btn-normal" form-type="submit">
								<view class="fast-item fast-item_home">
									<view class="fast-icon">
										<text class="iconfont icon-shouye"></text>
									</view>
									<view class="fast-text">
										<text>首页</text>
									</view>
								</view>
							</button>
						</form>
							<!-- #ifdef MP-WEIXIN -->
							<button class="btn-normal" open-type="contact" >
								<view class="fast-item">
									<view class="fast-icon">
										<text class="iconfont icon-kefu1"></text>
									</view>
									<view class="fast-text">
										<text>客服</text>
									</view>
								</view>
							</button>
						<!-- #endif -->
						
						<!-- #ifdef APP-PLUS  || H5-->
						<button class="btn-normal">
							<view class="fast-item" @tap="openkefu">
								<view class="fast-icon">
									<text class="iconfont icon-kefu1"></text>
								</view>
								<view class="fast-text">
									<text>客服</text>
								</view>
							</view>
						</button>
						<!-- #endif -->
						
					</view>
					<!-- 操作按钮 -->
					<view class="foo-item-trigger flex-box">
						<form @submit="onSubmit" report-submit>
							<button v-if=" active.is_start && !active.is_end " class="opt-btn btn-main btn-normal" form-type="submit">
								<text>{{ is_partake ? '继续砍价' : '立即砍价' }}</text>
							</button>
							<button v-else class="opt-btn btn-gray btn-normal">
								<text>{{ active.is_end ? '活动已结束' : '活动未开启' }}</text>
							</button>
						</form>
					</view>
				</view>
			</view>

			<!-- 分享按钮 -->

			<zanactionsheet :show="share.show" :actions="share.actions" :cancelText="share.cancelText" :cancelWithMask="share.cancelWithMask"
			 mask-class="tiny" :goods_name="detail.goods_name" />

			<!-- 商品海报 弹出层 -->
			<!-- <zanpopup :show="share.showPopup" @close="togglePopup"> -->
			<view class="pop pop--bottom" :class="[share.showPopup ? 'pop--show' : '']" @close="onTogglePopup">
				<view class="pop__mask" @tap="onTogglePopup"></view>

				<view class="pop-poster pop-example__container pop__container" style="bottom: 10%;">
					<!-- 关闭按钮 -->
					<view class="pop-close dis-flex flex-x-center flex-y-center" @tap="onTogglePopup">
						<text class="iconfont icon-shanchu f-30 col-9"></text>
					</view>
					<form @submit="onSavePoster" report-submit="true">
						<view class="poster__image">
							<image mode="widthFix" :src="qrcode"></image>
						</view>
						<view class="poster__tips m-top10 t-c">
						</view>
						<view class="padding-box m-top10 profile-btn">
							<button form-type="submit">保存图片</button>
						</view>
					</form>
				</view>
			</view>
			<!-- </zanpopup> -->

			<!-- 确认购买弹窗 -->
			<!-- <zan-popup show=" showBottomPopup " type="bottom" bindclose="onToggleTrade"> -->
			<view class="pop pop--bottom" :class="[showBottomPopup ? 'pop--show' : '']" @close="onToggleTrade">
				<view class="pop__mask"></view>
				<view class="pop__container">
					<view class="popup__trade">
						<!-- 关闭按钮 -->
						<view class="trade-close dis-flex flex-x-center flex-y-center" @tap="onToggleTrade">
							<text class="iconfont icon-close f-26"></text>
						</view>
						<!-- 主体信息 -->
						<view class="trade-main">
							<view class="goods-info dis-flex">
								<!-- 图片名称 -->
								<view class="goods-image" @tap="onPreviewSkuImage">
									<image :src=" skuCoverImage "></image>
								</view>
								<view class="block-right flex-box">
									<view class="block-item dis-flex flex-y-end">
										<!-- 商品价 -->
										<view class="goods-price col-m">
											<text class="f-26">￥</text>
											<text class="f-36">{{ active.floor_price }}</text>
										</view>
										<!-- 划线价 -->
										<view class="line-price" v-if=" line_price > 0 ">
											<text>{{ goods.goods_sku.goods_price }}</text>
										</view>
									</view>
									<view class="goods-stock dis-flex">
										<text class="flex-box f-26 col-7">库存：{{stock_num}}</text>
									</view>
								</view>
							</view>
							<!-- 规格列表 -->
							<view class="goods-attr">
								<!-- 滚动容器 -->
								<scroll-view class="goods-attr--scroll" scroll-y=" true ">
									<view v-if=" goodsMultiSpec.spec_attr !== undefined &&  goodsMultiSpec.spec_attr.length >0" class="group-item" v-for="(attr,index) in  goodsMultiSpec.spec_attr" :key="index">
										<view class="tips-text" data-id=" attr.group_id ">{{ attr.group_name }}</view>
										<!-- <view class="spec-item {{ item.checked ? 'cur' : '' " v-for=" attr.spec_items " v-for-index="item_idx"
									 v-key="this" data-attr-idx=" attr_idx " data-item-idx=" item_idx " @tap="onSwitchSpec">
										{{ item.spec_value }}
									</view> -->
									</view>
								</scroll-view>
							</view>

							<!-- 购买数量 -->
							<!-- <view class="goods-number">
							<view class="tips-text">
							  <text>购买数量</text>
							</view>
							<view class="select-number">
							  <form @submit="onDecGoodsNumber" report-submit="true">
								<button form-type="submit" class="default {{ goods_num > 1 ? '' : 'disabled' " type="default">-</button>
							  </form>
							  <input bindinput="onInputGoodsNum" type="number" value=" goods_num "></input>
							  <form submit="onIncGoodsNumber" report-submit="true">
								<button form-type="submit" class="default" type="default">+</button>
							  </form>
							</view>
						  </view> -->
						</view>

						<!-- 底部操作栏 -->
						<view class="footer-fixed f-30">
							<view v-if=" stock_num > 0 " class="flex-box">
								<form @submit="onSubmit2" report-submit>
									<button class="opt-btn btn-main btn-normal" form-type="submit">
										<text>确定</text>
									</button>
								</form>
							</view>
							<view class="flex-box opt-btn btn-gray" v-else>暂无现货</view>
						</view>
					</view>
				</view>
			</view>

			<xy-dialog title="砍价规则" content="" :show="dialogshow" 
			 :isShowCancel="!dialogshow" confirmColor="#df5000">
				<!-- rule_detail -->
				<view style="padding: 0 30upx 30upx;text-align:left;">
					<view v-for="(items,indexs) in rule_detail" :key='indexs' style="margin: 20upx 0upx;">
						{{items}}
					</view>
				</view>
			</xy-dialog>


			<!-- 快捷导航 -->
			<shortcut bottom="120upx"></shortcut>

			<!-- 返回顶部 -->
			<view @tap="onScrollTop" class="widget-goTop" v-if=" showTopWidget ">
				<text class="iconfont icon-fanhuidingbu"></text>
			</view>

		</view>
	</view>
</template>

<script>
	import zanactionsheet from '../../../components/goods/actionsheet.vue'
	import zanpopup from '../../../components/goods/popup.vue'
	import shortcut from '../../../components/goods/shortcut.vue'
	// import zandialog from '../../../components/dialog/index.vue'
	import xyDialog from '@/components/xy-dialog/xy-dialog.vue';
	// 富文本插件

	// 工具类
	import util from '../../../utils/util.js';
	// 倒计时插件
	import CountDown from '../../../utils/countdown.js';
	// 对话框插件
	import Dialog from '../../../components/dialog/dialog';
	export default {
		components: {
			// （组件命名）
			zanactionsheet,
			zanpopup,
			shortcut,
			xyDialog
			// zandialog
		},
		props: {
			zanpopup: {},
			shortcut: {},
			zanactionsheet: {},
			// zandialog: {}
		},



		// 记录规格的数组
		// const goodsSpecArr = [];
		data() {
			return {
				dialogshow: false, //拼团规则是否显示
				rule_detail: {},
				active_id: '',
				hiddenOrder: null,
				indicatorDots: true, // 是否显示面板指示点
				autoplay: true, // 是否自动切换
				interval: 3000, // 自动切换时间间隔
				duration: 800, // 滑动动画时长

				currentIndex: 1, // 轮播图指针
				floorstatus: false, // 返回顶部

				detail: {}, // 商品详情信息
				goods_price: 0, // 商品价格
				line_price: 0, // 划线价格
				stock_num: 0, // 库存数量

				goods_num: 1, // 商品数量
				goods_sku_id: 0, // 规格id
				cart_total_num: 0, // 购物车商品总数量
				goodsMultiSpec: {}, // 多规格信息

				c: '',
				scrollTop: '',
				showBottomPopup: null,
				image_path: '',
				qrcode: '',
				activeList: {},
				article: '',

				countDownList: [], // 时间记录
				actEndTimeList: {},
				// 分享按钮组件
				share: {
					show: false,
					cancelWithMask: true,
					cancelText: '关闭',
					actions: [{
						name: '生成商品海报',
						className: 'action-class',
						loading: false
					}, {
						name: '发送给朋友',
						openType: 'share'
					}],
					// 商品海报
					showPopup: false,
				},

				// 返回顶部
				showTopWidget: false,

				active: {}, // 砍价活动详情
				goods: {}, // 商品详情
				setting: {}, // 砍价配置
				is_partake: false, // 当前用户是否正在参与
				task_id: false, // 当前用户正在参与的任务id
				skuCoverImage:'',
				dataIndex:'',
				date:'',
				dynamic:{},
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this
			// scene = _this.getSceneData(options);
			// 砍价商品id
			_this.setData({
			  active_id: options.active_id ? options.active_id : scene.aid
			});
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow(options) {
			let _this = this;
			// 获取砍价商品信息
			_this.getActiveDetail();
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			let _this = this;
			// 构建页面参数
			let params = _this.getShareUrlParams({
				active_id: _this.active.active_id
			});
			return {
				title: _this.goods.goods_name,
				path: '/pages/bargain/goods/index?' + params
			};
		},

		methods: {
			
			/**
			 * 获取砍价商品信息
			 */
			getActiveDetail() {
				let _this = this;
				// console.log(_this.active_id);
				_this._get('bargain.active/detail', {
					active_id: _this.active_id
				}, (result) => {
					// 初始化详情数据
					let data = _this._initData(result.data);
					// console.log(data);
					_this.setData(data);
					// 执行倒计时
					if (!data.active.is_end) {
						// 倒计时插件不兼容h5
						CountDown.onSetTimeList(_this, "actEndTimeList");
					}
				});
			},

			/**
			 * 初始化详情数据
			 */
			_initData(data) {
				let _this = this;
				// 商品详情
				let goodsDetail = data.goods;
				// 富文本转码
				if (goodsDetail.content.length > 0) {
					// wxParse.wxParse('content', 'html', goodsDetail.content, _this, 0); 
					let article = goodsDetail.content.replace(/<img/g, "<img style='max-width:100%;height:auto;'");
					_this.setData({
						'article': article
					});
				}
				// 商品价格/划线价/库存
				data.goods_sku_id = goodsDetail.goods_sku.spec_sku_id;
				data.goods_price = goodsDetail.goods_sku.goods_price;
				data.line_price = goodsDetail.goods_sku.line_price;
				data.stock_num = goodsDetail.goods_sku.stock_num;
				// 商品封面图(确认弹窗)
				data.skuCoverImage = goodsDetail.goods_image;
				// 多规格商品封面图(确认弹窗)
				if (goodsDetail.spec_type == 20 && goodsDetail.goods_sku['image']) {
					data.skuCoverImage = goodsDetail.goods_sku['image']['file_path'];
				}
				// 初始化商品多规格
				if (goodsDetail.spec_type == 20) {
					data.goodsMultiSpec = _this._initManySpecData(goodsDetail.goods_multi_spec);
				}
				// 记录活动到期时间
				data.actEndTimeList = [{
					date: data.active.end_time
				}];
				return data;
			},

			/**
			 * 初始化商品多规格
			 */
			_initManySpecData(data) {
				let goodsSpecArr = [];
				for (let i in data.spec_attr) {
					for (let j in data.spec_attr[i].spec_items) {
						if (j < 1) {
							data.spec_attr[i].spec_items[0].checked = true;
							goodsSpecArr[i] = data.spec_attr[i].spec_items[0].item_id;
						}
					}
				}
				return data;
			},

			/**
			 * 点击切换不同规格
			 */
			onSwitchSpec(e) {
				let goodsSpecArr = [];
				let _this = this,
					attrIdx = e.currentTarget.dataset.attrIdx,
					itemIdx = e.currentTarget.dataset.itemIdx,
					goodsMultiSpec = _this.goodsMultiSpec;
				// 记录formid
				_this.saveFormId(e.detail.formId);
				for (let i in goodsMultiSpec.spec_attr) {
					for (let j in goodsMultiSpec.spec_attr[i].spec_items) {
						if (attrIdx == i) {
							goodsMultiSpec.spec_attr[i].spec_items[j].checked = false;
							if (itemIdx == j) {
								goodsMultiSpec.spec_attr[i].spec_items[itemIdx].checked = true;
								goodsSpecArr[i] = goodsMultiSpec.spec_attr[i].spec_items[itemIdx].item_id;
							}
						}
					}
				}
				_this.setData({
					goodsMultiSpec
				});
				// 更新商品规格信息
				_this._updateSpecGoods(goodsSpecArr);
			},

			/**
			 * 更新商品规格信息
			 */
			_updateSpecGoods(goodsSpecArr) {
				let _this = this,
					specSkuId = goodsSpecArr.join('_');
				// 查找skuItem
				let spec_list = _this.goodsMultiSpec.spec_list,
					skuItem = spec_list.find((val) => {
						return val.spec_sku_id == specSkuId;
					});
				// 记录goods_sku_id
				// 更新商品价格、划线价、库存
				if (typeof skuItem === 'object') {
					_this.setData({
						goods_sku_id: skuItem.spec_sku_id,
						goods_price: skuItem.form.goods_price,
						line_price: skuItem.form.line_price,
						stock_num: skuItem.form.stock_num,
						skuCoverImage: skuItem.form.image_id > 0 ? skuItem.form.image_path : _this.goods.goods_image
					});
				}
			},

			/**
			 * 设置轮播图当前指针 数字
			 */
			setCurrent(e) {
				let _this = this;
				_this.setData({
					currentIndex: e.detail.current + 1
				});
			},

			/**
			 * 浏览商品图片
			 */
			onPreviewImages(e) {
				let _this = this;
				let index = e.currentTarget.dataset.index,
					imageUrls = [];
				_this.goods.image.forEach(item => {
					imageUrls.push(item.file_path);
				});
				uni.previewImage({
					current: imageUrls[index],
					urls: imageUrls
				})
			},

			/**
			 * app客服
			 */
			openkefu: function() {
				let url = 'mqqwpa://im/chat?chat_type=crm&uin=' + this.getQQkefu()
				this.openBrowser(url);
			},
			/**
			 * 预览Sku规格图片
			 */
			onPreviewSkuImage(e) {
				let _this = this;
				uni.previewImage({
					current: _this.skuCoverImage,
					urls: [_this.skuCoverImage]
				})
			},

			/**
			 * 跳转到评论
			 */
			onTargetToComment() {
				let _this = this;
				uni.navigateTo({
					url: './comment/comment?goods_id=' + this.goods.goods_id
				});
			},

			/**
			 * 返回顶部
			 */
			onScrollTop(t) {
				let _this = this;
				_this.setData({
					scrollTop: 0
				});
			},

			/**
			 * 显示/隐藏 返回顶部按钮
			 */
			onScrollEvent(e) {
				let _this = this;
				_this.setData({
					showTopWidget: e.detail.scrollTop > 200
				})
			},

			/**
			 * 显示分享选项
			 */
			onClickShare(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				_this.setData({
					'share.show': true
				});
			},

			/**
			 * 关闭分享选项
			 */
			onCloseShare() {
				let _this = this;
				_this.setData({
					'share.show': false
				});
			},

			/**
			 * 点击生成商品海报
			 */
			onClickShareItem(e) {
				let _this = this;
				// if (e.detail.index === 0) {
				// 显示商品海报
				_this._showPoster();
				// }
				_this.onCloseShare();
			},

			/**
			 * 切换商品海报
			 */
			onTogglePopup() {
				let _this = this;
				_this.setData({
					'share.showPopup': !_this.share.showPopup
				});
			},

			/**
			 * 显示商品海报图
			 */
			_showPoster() {
				let _this = this;
				uni.showLoading({
					title: '加载中',
				});
				_this._get('bargain.active/poster', {
					active_id: _this.active_id
				}, (result) => {
					_this.setData(result.data);
					// console.log(result.data);
					_this.onTogglePopup();
				}, null, () => {
					uni.hideLoading();
				});
			},

			/**
			 * 保存海报图片
			 */
			onSavePoster(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				uni.showLoading({
					title: '加载中',
				});
				// 下载海报图片
				uni.downloadFile({
					url: _this.qrcode,
					success(res) {
						uni.hideLoading();
						// 图片保存到本地
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(data) {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});
								// 关闭商品海报
								_this.onTogglePopup();
							},
							fail(err) {
								console.log(err.errMsg);
								if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									uni.showToast({
										title: "请允许访问相册后重试",
										icon: "none",
										duration: 1000
									});
									setTimeout(() => {
										uni.openSetting();
									}, 1000);
								}
							},
							complete(res) {
								console.log('complete');
								// uni.hideLoading();
							}
						})
					}
				})
			},

			/**
			 * 确认购买弹窗
			 */
			onToggleTrade(e) {
				let _this = this;
				if (typeof e === 'object') {
					// 记录formId
					e.detail.hasOwnProperty('formId') && _this.saveFormId(e.detail.formId);
				}
				_this.setData({
					showBottomPopup: !_this.showBottomPopup
				});
			},

			/**
			 * 显示砍价规则
			 */
			onToggleRules(e) {

				let _this = this;
				var str = _this.setting.bargain_rules;
				// 分割句号
				var rule_detail = str.split("。");

				_this.setData({
					dialogshow: !_this.dialogshow,
					rule_detail: rule_detail,
				});

				return false;
				// uni-app未知原因无法使用自定义Dialog组件
				// 记录formId
				_this.saveFormId(e.detail.formId);
				// 显示砍价规则
				Dialog({
					title: '砍价规则',
					message: _this.setting.bargain_rules,
					selector: '#zan-base-dialog',
					isScroll: true, // 滚动
					buttons: [{
						text: '关闭',
						color: 'red',
						type: 'cash'
					}]
				});
			},

			/**
			 * 确认砍价
			 */
			onSubmit(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				// 判断是否已参与当前的砍价活动，如果已参与的话跳转到砍价任务
				if (_this.is_partake) {
					uni.navigateTo({
						url: '../task/index?task_id=' + _this.task_id
					});
					return;
				}
				// 多规格商品，弹出选择器
				if (_this.goods.spec_type == 20) {
					_this.onToggleTrade();
					return;
				}
				// 确认发起砍价
				_this.onCheckout();
			},

			/**
			 * 确认砍价(选择规格后的二次确认)
			 */
			onSubmit2(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				// 关闭选择器
				_this.onToggleTrade();
				// 确认发起砍价
				_this.onCheckout();
			},

			/**
			 * 确认发起砍价
			 */
			onCheckout() {
				let _this = this;
				if (_this.disabled) {
					return false;
				}
				// 显示loading
				uni.showLoading({
					title: '正在处理...'
				});
				// 创建砍价活动订单
				_this._post_form('bargain.task/partake', {
					active_id: _this.active_id,
					goods_sku_id: _this.goods_sku_id,
				}, result => {
					// success
					console.log('success');
					// 创建成功，跳转到砍价任务详情
					uni.navigateTo({
						url: '../task/index?task_id=' + result.data.task_id
					});
				}, result => {
					// fail
					console.log('fail');
				}, () => {
					// complete
					console.log('complete');
					uni.hideLoading();
					// 解除按钮禁用
					_this.disabled = false;
				});
			},

			/**
			 * 跳转到首页
			 */
			onTargetHome(e) {
				// 记录formid
				this.saveFormId(e.detail.formId);
				uni.switchTab({
					url: '/pages/index/index',
				})
			},
		}
	}
</script>

<style>
	/* wxParse.wxss */

	.container {
		padding-bottom: 112upx;
	}

	.slide-image {
		background: #fff;
	}

	.banner-box {
		height: 750upx;
	}

	/* banner计数 */

	.banner-num {
		position: absolute;
		right: 30upx;
		margin-top: -70upx;
		padding: 2upx 18upx;
		background: rgba(0, 0, 0, 0.363);
		border-radius: 50upx;
		color: #fff;
		font-size: 26upx;
	}

	/* 商品信息 */

	.goods-info {
		background: #fff;
		padding: 25upx 30upx;
	}

	.info-item__top {
		height: 54upx;
		margin-bottom: 30upx;
	}

	.info-item__top .active-tag {
		width: 108upx;
		color: #fff;
		background: #fe293f;
		padding: 3upx 5upx;
		border-radius: 15upx;
		font-size: 24upx;
		text-align: center;
		margin-right: 15upx;
	}

	.floor-price__samll {
		font-size: 26upx;
		line-height: 1;
		color: #fe293f;
	}

	/* 砍价底价 */

	.floor-price {
		color: #fe293f;
		margin-right: 15upx;
		font-size: 38upx;
		line-height: 1;
		margin-bottom: -2upx;
	}

	.original-price {
		font-size: 24upx;
		line-height: 1;
		text-decoration: line-through;
		color: #959595;
	}

	.goods-sales {
		font-size: 24upx;
		color: #959595;
	}

	.info-item__name .goods-name {
		font-size: 28upx;
	}

	/* 商品分享 */

	.goods-share__line {
		border-left: 1upx solid #f4f4f4;
		height: 60upx;
		margin: 0 30upx;
	}

	.goods-share .share-btn {
		line-height: normal;
		padding: 0;
		background: none;
		border-radius: 0;
		box-shadow: none;
		font-size: 8pt;
		border: none;
		color: #191919;
	}

	.goods-share .share-btn::after {
		border: none;
	}

	.goods-share .share__icon {
		font-size: 40upx;
		margin-bottom: 5upx;
	}

	/* 商品卖点 */

	.info-item_selling-point {
		margin-top: 15upx;
		font-size: 24upx;
		color: #808080;
	}

	/* 活动状态 */

	.info-item_status {
		margin-top: 20upx;
		padding: 15upx 20upx;
		font-size: 24upx;
		border-radius: 6upx;
	}

	.info-item_status .countdown-icon {
		font-size: 28upx;
		margin-right: 15upx;
	}

	/* 活动倒计时 */

	.info-item_countdown {
		background: #f0f9ff;
		color: #8f8f8f;
	}

	.info-item_countdown .countdown-icon {
		color: #1397d8;
	}

	/* 活动已结束 */

	.info-item_end {
		background: #ccc;
		color: #fff;
	}

	/* sku选择器 */

	.sku-selector {
		padding: 25upx 30upx;
	}

	.item-title {
		font-size: 28upx;
	}

	/* 砍价玩法 */

	.bargain-rules {
		padding: 20upx 0;
		font-size: 29upx;
	}

	.bargain-rules .item-title {
		padding: 0 30upx;
	}

	.bargain-rules .rule-simple {
		margin-top: 35upx;
		color: #737373;
	}

	.bargain-rules .i-number {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		margin-bottom: 15upx;
		border: 1upx dashed #c0c0c0;
	}

	/* 商品评论 */

	.goods-comment {
		padding: 20upx 30upx;
	}

	.goods-comment .item-title {
		font-size: 28upx;
		margin-bottom: 30upx;
	}

	.goods-comment .item-title .show-more {
		margin-right: 8upx;
		font-size: 26upx;
	}

	.comment-item {
		padding: 0 5upx;
	}

	.user-info {
		margin-right: 15upx;
	}

	.user-info .avatar {
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
		margin-right: 10upx;
	}

	.user-name {
		font-size: 24upx;
	}

	.star-rating .star-icon {
		padding-right: 6upx;
		color: #ccc;
		font-size: 26upx;
	}

	.star-rating .star-icon.active {
		color: #f4a213;
	}

	.goods-comment-cont {
		font-size: 30upx;
		color: #333;
		margin: 12upx 0;
	}

	/* 商品详情 */

	.goods-content .item-title {
		padding: 20upx 30upx;
	}

	/* 返回顶部 */

	.widget-goTop {
		bottom: 210upx;
	}

	/* 底部操作栏 */

	.footer-fixed {
		height: 92upx;
	}

	.footer-container {
		width: 100%;
	}

	.foo-item-fast {
		box-sizing: border-box;
		width: 256upx;
		line-height: 1;
	}

	.fast-item {
		padding: 0 10upx;
		line-height: 1;
	}

	.fast-item .fast-icon {
		margin-bottom: 6upx;
	}

	.fast-item.fast-item_home {
		margin-right: 30upx;
	}

	.foo-item-fast .fast-icon {
		font-size: 46upx;
	}

	.foo-item-fast .fast-text {
		font-size: 24upx;
	}

	/* 确认购买弹窗 */

	.popup__trade {
		width: 750upx;
		position: relative;
		padding-bottom: 92upx;
		z-index: 999;
	}

	.popup__trade .trade-close {
		position: absolute;
		top: 20upx;
		right: 20upx;
		width: 50upx;
		height: 50upx;
	}

	.popup__trade .trade-main {
		background: #fff;
		box-sizing: border-box;
		padding: 30upx 25upx;
	}

	.popup__trade .footer-fixed {
		position: absolute;
		box-shadow: none;
	}

	.popup__trade .trade-main .goods-info .goods-image {
		margin-top: -80upx;
		margin-right: 20upx;
	}

	.popup__trade .trade-main .goods-info .goods-image image {
		width: 180upx;
		height: 180upx;
		border: 5upx solid #fff;
		box-shadow: 0 4upx 10upx rgba(220, 220, 220, 0.79);
	}

	.popup__trade .trade-main .goods-info .line-price {
		color: #777;
		font-size: 26upx;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	.popup__trade .trade-main .goods-info .goods-stock {
		padding-left: 10upx;
		margin-top: 10upx;
		color: #777;
		font-size: 26upx;
	}

	.popup__trade .trade-main .goods-number {
		margin: 20upx 0;
		justify-content: space-between;
	}

	.popup__trade .trade-main .goods-number .tips-text {
		color: #888;
		background: #fff;
		border-radius: 10upx;
		margin-bottom: 10upx;
		font-size: 26upx;
	}

	/* 商品规格 */

	.goods-attr {
		padding: 10upx 0;
	}

	.goods-attr .goods-attr--scroll {
		max-height: 600upx;
	}

	.goods-attr .group-item .tips-text {
		font-size: 26upx;
		color: #888;
		margin-bottom: 10upx;
	}

	.goods-attr .group-item .spec-item {
		display: inline-block;
	}

	.goods-attr .group-item .spec-item {
		font-size: 26upx;
		height: 55upx;
		line-height: 55upx;
		padding: 0 30upx;
		margin: 0 20upx 20upx 0;
		border-radius: 8upx;
		color: #888;
		border: 1rpx solid #e6e6e6;
	}

	.goods-attr .group-item .spec-item.cur {
		background: #f82169;
		border: 1upx solid #f82169;
		color: #fff;
	}

	.goods-attr .group-item .spec-item.cur:after {
		position: absolute;
		bottom: 0;
		right: 0;
		content: '';
		display: inline-block;
		width: 16upx;
		height: 16upx;
	}

	.goods-attr .group-item .spec-item.disabled {
		color: #dedede;
		cursor: not-allowed;
		background: #eee;
		border: 2upx dashed #dedede;
	}

	.select-number {
		width: 202upx;
		height: 52upx;
		flex-direction: row;
		border: 1upx solid rgb(231, 231, 231);
		border-radius: 5upx;
	}

	.select-number .default {
		float: left;
		width: 60upx;
		height: 52upx;
		line-height: 48upx;
		padding: 0;
		background: #fff;
		color: #444;
		font-size: 40upx;
		border-radius: unset;
	}

	.select-number .disabled {
		background: #f7f7f7;
		color: #ddd;
	}

	.select-number button:after {
		content: none;
		border: none;
	}

	.select-number input {
		float: left;
		width: 80upx;
		height: 52upx;
		line-height: 52upx;
		border-right: 1upx solid #eee;
		border-left: 1upx solid #eee;
		text-align: center;
		font-size: 28upx;
		color: #444;
	}

	/* 确认购买弹窗 */

	.popup__trade {
		width: 750upx;
		position: relative;
		padding-bottom: 92upx;
		z-index: 999;
	}

	.popup__trade .trade-close {
		position: absolute;
		top: 20upx;
		right: 20upx;
		width: 50upx;
		height: 50upx;
	}

	.popup__trade .trade-main {
		background: #fff;
		box-sizing: border-box;
		padding: 24upx;
	}

	.popup__trade .footer-fixed {
		position: absolute;
	}

	.popup__trade .trade-main .goods-info {
		margin-bottom: 10upx;
	}

	.popup__trade .trade-main .goods-info .goods-image {
		margin-top: -40px;
		margin-right: 20upx;
	}

	.popup__trade .trade-main .goods-info .goods-image image {
		width: 90px;
		height: 90px;
		border: 5upx solid #fff;
		box-shadow: 0 4upx 10upx rgba(220, 220, 220, 0.79);
	}

	.popup__trade .trade-main .goods-info .money-box {
		margin: 0;
	}

	.popup__trade .trade-main .goods-info .goods-stock {
		padding-left: 10upx;
	}

	.popup__trade .trade-main .buy_number {
		margin: 20upx 0;
		justify-content: space-between;
	}

	.popup__trade .trade-main .buy_number .buyNumber {
		color: #888;
		background: #fff;
		border-radius: 10upx;
		margin-bottom: 10upx;
	}
	
	/* 商品卖点 */

	.goods-selling-point {
		color: #f20c59;
	}
	/* 弹窗 */
	.pop {
		visibility: hidden
	}
	
	.pop--show {
		visibility: visible
	}
	
	.pop__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 14;
		background: rgba(0, 0, 0, .5);
		display: none
	}
	
	.pop__mask--hide {
		background: 0 0
	}
	
	.pop__container {
		position: fixed;
		left: 50%;
		top: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		z-index: 15;
		opacity: 0
	}
	
	.pop--show .pop__container {
		opacity: 1
	}
	
	.pop--show .pop__mask {
		display: block
	}
	
	.pop--left .pop__container {
		left: 0;
		top: 50%;
		-webkit-transform: translate3d(-100%, -50%, 0);
		transform: translate3d(-100%, -50%, 0)
	}
	
	.pop--show.pop--left .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}
	
	.pop--right .pop__container {
		right: 0;
		top: 50%;
		left: auto;
		-webkit-transform: translate3d(100%, -50%, 0);
		transform: translate3d(100%, -50%, 0)
	}
	
	.pop--show.pop--right .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}
	
	.pop--bottom .pop__container {
		top: auto;
		left: 50%;
		bottom: 0;
		-webkit-transform: translate3d(-50%, 100%, 0);
		transform: translate3d(-50%, 100%, 0)
	}
	
	.pop--show.pop--bottom .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
	
	.pop--top .pop__container {
		top: 0;
		left: 50%;
		-webkit-transform: translate3d(-50%, -100%, 0);
		transform: translate3d(-50%, -100%, 0)
	}
	
	.pop--show.pop--top .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
</style>
